<template>
	<view class="container">
		<view class="searchbox plr-30 mtb-30">
			<u-search placeholder="搜索用户手机号"  @change="searchfn" @search="searchfn" @custom="searchfn"
				shape="square" v-model="keyword"></u-search>
			<view class="my_ID mt-20 size-26" v-if="myshow">
				{{myId}}
			</view>
			<view class="searchList">
				<view class="searchFriend flex flex-between  ptb-20" v-for="item in searchList" @click="addFriend">
					<view class="flex">
						<image :src=" 'http://im.ezongguan.com/static/photo/'+item.photo " mode=""></image>
						<view class="ml-20">
							<view class="">{{item.nickname}}</view>
							<view class="">ID:{{item.id}}</view>
						</view>
					</view>
					<view class="">
						<u-button @click='handleaddfriend'>添加好友</u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myshow: true,
				keyword: '',
				myId: '我的用户ID：254631',
				searchList: []
			}
		},
		onShow() {
			
		},
		methods: {
			// 好友查看
			addFriend() {
				console.log(1);
			},
			// 好友添加
			handleaddfriend(){
				console.log(this.user_id);
				uni.navigateTo({
					url:'/pages/chip/addFriend?user_id='+this.user_id
				})
			},
			// 搜索
			searchfn() {
				this.searchList = []
				var params = {
					_token: uni.getStorageSync('im_token'),
					_agent_id: '1',
					val: this.keyword
				}
				uni.request({
					url: `  http://im.ezongguan.com/im/get/searchUser`,
					method: 'POST',
					data: params,
					success: (res) => {
						if (res.data.data.data <= 0) {
							this.myId = '该用户不存在'
						} else {
							console.log(res.data.data.data[0].id)
							this.user_id=res.data.data.data[0].id
							this.searchList = res.data.data.data
							this.myshow = false
						}
					},
				})
			}
		},

	}
</script>

<style lang="less" scoped>
	.container {
		width: 100%;

		.searchbox {
			.searchList {
				width: 100%;

				.searchFriend {
					image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}
				}
			}

			.my_ID {
				text-align: center;
			}
		}
	}
</style>
